<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>top</view>
				<view>位置，可选top、bottom、center</view>
			</view>
			<view class="tr">
				<view>top</view>
				<view>String</view>
				<view>无</view>
				<view>头部向下偏移量，point为top时有效。需带单位，%等同vh</view>
			</view>
			<view class="tr">
				<view>bottom</view>
				<view>String</view>
				<view>无</view>
				<view>底部向上偏移量，point为bottom时有效。需带单位，%等同vh</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>通知窗宽度，top、bottom默认100%，center默认50%。空值使用默认，无默认则等同auto</view>
			</view>
			<view class="tr">
				<view>useMask</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用遮罩，注意只能等到通知结束取消遮罩，期间屏蔽屏幕点击操作</view>
			</view>
			<view class="tr">
				<view>bgMask</view>
				<view>String</view>
				<view>无</view>
				<view>遮罩背景</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>110</view>
				<view>手动指定层级</view>
			</view>
			<view class="tr">
				<view>open</view>
				<view>function</view>
				<view></view>
				<view>
					refs调用，打开一条通知。传入3个参数：msg内容、options设置、tempMask是否开启临时遮罩。
					<view>options可为字符串，表示预定义样式的键名。预定义样式配置在options.js内</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="打开设置参数 options" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>默认值</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色。默认值：primary</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色。默认值：无</view>
					</view>
					<view class="tr">
						<view>borderWidth</view>
						<view>Number</view>
						<view>边框宽</view>
					</view>
					<view class="tr">
						<view>borderType</view>
						<view>String</view>
						<view>边框类型，默认值：solid</view>
					</view>
					<view class="tr">
						<view>plain</view>
						<view>Booleam</view>
						<view>镂空。默认值：false</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>圆角，默认值：0.5em</view>
					</view>
					<view class="tr">
						<view>left</view>
						<view>Boolean</view>
						<view>左对齐，false为居中。默认值：true</view>
					</view>
					<view class="tr">
						<view>spaceInside</view>
						<view>String, Array</view>
						<view>内边距，默认值：["0.5em", "0.75em", "0.5em", "0.75em"]</view>
					</view>
					<view class="tr">
						<view>spaceOutside</view>
						<view>String</view>
						<view>外边距，只控制左右边距。默认值：0.75em</view>
					</view>
					<view class="tr">
						<view>rowSpace</view>
						<view>String</view>
						<view>行间距，只控制下边距。默认值：0.5em</view>
					</view>
					<view class="tr">
						<view>icon</view>
						<view>String</view>
						<view>前置图标。默认值：icon-information</view>
					</view>
					<view class="tr">
						<view>iconSize</view>
						<view>String</view>
						<view>图标大小。默认值：1em</view>
					</view>
					<view class="tr">
						<view>iconReverse</view>
						<view>Boolean</view>
						<view>图标与文字反向。默认值：false</view>
					</view>
					<view class="tr">
						<view>shadow</view>
						<view>String</view>
						<view>外框阴影，同css格式。默认值："0 1px 0.25em rgba(0, 0, 0, .2)"</view>
					</view>
					<view class="tr">
						<view>separation</view>
						<view>Boolean</view>
						<view>
							图标与内容分离。默认值：true
							<view>
								开启后通知条底色、边框色由主题white或black控制，文字色由textType和textColor控制
							</view>
							<view>
								type、color、plain控制只应用到图标。非plain状态图标大小为1.2em
							</view>
							<view>
								图标圆角由iconRadius控制
							</view>
						</view>
					</view>
					<view class="tr">
						<view>textType</view>
						<view>String</view>
						<view>文字主题色，仅用于separation开启的情况</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>文字自定义主题色，仅用于separation开启的情况</view>
					</view>
					<view class="tr">
						<view>iconRadius</view>
						<view>String</view>
						<view>图标圆角，仅用于separation开启的情况。默认值：50%</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-loading :loading="开关变量">log内容&lt;/vi-loading>`}}
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','测试消息','info')">普通消息</vi-button>
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','测试消息','success')">成功消息</vi-button>
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','警告消息','warning')">警告消息</vi-button>
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','错误消息','error')">错误消息</vi-button>
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','测试消息', 'msg')">msg消息</vi-button>
			</view>
			<view class="py-sm">
				<vi-button @click="openWin('vi_notify','开了遮罩，页面屏蔽点击','info',true)">临时遮罩</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
